持续更新
MP3 不允许启动AudioContext
The AudioContext was not allowed to start.
It must be resumed (or created) after a user gesture on the page
pc端打开chrome浏览器，新建页签，地址栏输入
chrome://flags/#autoplay-policy 选择 No user gesture is required
之后重启浏览器即可，chrome浏览器更新版本后的新增的安全策略。判断iOS系统版本号
if(navigator.userAgent.match(/iphone/i)){
var verinfo = navigator.userAgent.match(/os [\d._]*/gi);
version = (verinfo+"").replace(/[^0-9|_.]/ig,"").replace(/_/ig,".");//获取具体的系统版本号
console.log(version);
}【M】iOS12微信输入法键盘弹起H5页面无法还原
//判断ios系统
var u=navigator.userAgent;
if(u.indexOf('iPhone')>-1){
var flag;
$('body').on('focus','input',function(){
flag=false;
});
$('body').on('blur','input',function(){
flag=true;
setTimeout(function(){
if(flag==false){
return false;
}else{
document.body.scrollTop=document.body.scrollTop;
}
//防止在多个input间切换时做过多操作
},0)
});
}【M】微信JSSDK分享至朋友圈成功后不回调问题
微信分享至朋友圈后回调的方法内若使用ajax，需配置为同步（async:false），否则会出现不回调的情况。
var share_opts = {
title : '首届接梗王大赛，这些00后都不懂的梗，你能接上来多少？',
desc : '1分钟，挑战10道题，包含电影、动漫、游戏...答对有奖！快来挑战！>>',
img : '../images/share.jpg',
url : location.href.split('#')[0],
key : '',
successCallback: function(){
$.ajax({
type: 'post',
dataType:"json",
async : false,
url: "common/share.php",
data:{'url':location.href.split('#')[0]},
success: function(data){
if(data.status==1) {
alert("分享成功，可再次挑战！");
window.location.href=window.location.href;
}
}
});
}
};
$(function(){
weixin_jssdk_ops.init(share_opts);
});【swiper】4.0滚轮无法滚动
参数
3.0
mousewheelControl : true,//开启鼠标切换
4.0
mousewheel : true,//开启鼠标切换
解决方式
//从底层库类注释执行代码
//搜索
// B.handle
//
//注释
// if (!s.mouseEntered && !a.releaseOnEdges)
// return !0;【M】rem逐帧动画抖动解决方案
https://aotu.io/notes/2017/08/14/fix-sprite-anim/【M】audio标签在苹果机上无法自动播放
<!-- music -->
<audio controls="controls" loop="loop" autoplay="autoplay" id="musicAudio">
<source src="images/bg_music.mp3" type="audio/mpeg"/>
</audio>
<script>
var bgAudio = document.getElementById('musicAudio');
document.addEventListener('WeixinJSBridgeReady',function(){
bgAudio.play();
}, false);
</script>动态改变微信title
var $body = $('body');
document.title = '五班老同学（35）';
var $iframe = $("<iframe style='display:none;' src='/favicon.ico'></iframe>");
$iframe.on('load',function() {
setTimeout(function() {
$iframe.off('load').remove();
}, 0);
}).appendTo($body);判断是否是微信环境
function isWeChat(){
this.ua = navigator.userAgent.toLowerCase();
return this.ua.match(/MicroMessenger/i) == 'micromessenger'?true:false;
}解决a标签双击出现蓝色背景
a,button,input,optgroup,select,textarea, div {
-webkit-tap-highlight-color:rgba(0,0,0,0); /*去掉a、input和button点击时的蓝色外边框和灰色半透明背景*/
}判断浏览器低版本插入HTML提示函数
if(!!window.ActiveXObject || "ActiveXObject" in window){
$('body').append('<div style="width:100%;height:50px;background:#fff;color:#000;border-bottom:1px solid #fff;text-align:center;line-height:50px;border-top:1px solid #cfcfcf;font-size:16px;position:fixed;bottom:0;z-index: 9999">您使用的浏览器版本过低，可能会影响到您浏览本页面，建议升级您的浏览器： <a href="http://www.google.cn/chrome/browser/desktop/" style="padding:15px; background:#c81331; color:#fff;" target="_black">谷歌 Chrome</a></div>').css('padding-bottom','200px');
};前端引用外链须知
//正常外链引用
<script type="text/javascript" src="http://x.js"></script>
//防止外链加载缓慢 加上异步加载
//方法一 -async
<script type="text/javascript" src="http://x.js" async></script>
此方法只兼容高版本
//方法二 动态创建JS
(function() {
var hm = document.createElement("script");
hm.src = "http://x.js";
var s = document.getElementsByTagName("body")[0];
s.appendChild(hm);
})();监听video播放或暂停事件
var myVideo=document.getElementById('video');
myVideo.addEventListener('play',function(){
//播放执行
});
myVideo.addEventListener('pause',function(){
//暂停执行
}) UC浏览器会出现背景图可点的情况
bug说明
# 当背景图采用img的方式时，在UC浏览器下（其他浏览器不会），会出现点击背景图，浏览器会当做一张图片解析，弹出背景图。
解决方案
# 给img标签添加去除浏览器默认行为的点击事件
# 把img变成background （把图片变成css中的背景图）
代码示例
//html
<img src="mobile/images/bg_.png" alt="" onclick="return false">【PC端】CKobject多个视频同时播放-其它视频未关闭
API 文档
http://www.ckplayer.com/manual/
线上例子
http://act.leiting.com/wd/201705/pk/pc/index.html
代码
if(CKobject.getObjectById('ckplayer_a1')){
CKobject.getObjectById('ckplayer_a1').videoPause();
}
if(CKobject.getObjectById('ckplayer_a2').playOrPause){
CKobject.getObjectById('ckplayer_a2').playOrPause();
}【移动端】上传附件
苹果手机目前只支持访问图片和视频格式的文件上传，暂不支持其他格式的文件
安卓手机支持多种格式上传，但存在部分机型不支持或是失效
建议：上传除图片以外的格式文件还是在PC上完成比较好
//错误示范
在浏览器模拟iphone的时候是各种文件都可以上传（以真机为主）
//正确示范
iphone目前只支持访问图片和视频格式的文件上传（真机测试结果）
【移动端】使用margin排版问题
margin 排位会有问题，最好使用 定位
【移动端】使用margin排版问题【移动端】点击事件无法触发
JS创建DOM的时候，原本的事件无法绑定、事件委托失败,
//错误示范
$('.picture').on('click',function(){
alert(1)
}）
//正确示范（是在$('.product ul')下面创建DOM）使用绑定的方式
$('.product ul').on('click','.picture',function(){
alert(1)
}）雷霆游戏console
(function() {
this.log = window.console.log;
this.log('%cL%ce%ci%cT%ci%cn%cg %cG%ca%cm%ce', 'font-size:30px;color:#32e60b;', 'font-size:30px;color:#64d41b;', 'font-size:30px;color:#97e012;', 'font-size:30px;color:#f9f701;', 'font-size:30px;color:#fe9e00;', 'font-size:30px;color:#d4651b;', 'font-size:30px;color:#5f3b7a;', 'font-size:30px;color:#3d319a;', 'font-size:30px;color:#313eb0;', 'font-size:30px;color:#1f38ac;', 'font-size:30px;color:#0b1479;');
this.log('我们是XXXXXXX-%c平台Web前端团队', 'color:#fd6a7f;font-weight:bold;');
this.log('XXXXXX始终贯彻着-%c为用户创造美好体验', 'color:#fd6a7f');
this.log('加入XXXXXX-%chttp://BAIDU.com/', 'color:#fd6a7f');
this.log('%c', 'padding:30px 140px;line-height:100px;background:url("logo.png") no-repeat;background-size:100% 100%;');
this.log('%c--------', 'color:pink')
})();JS如何判断是不是iphoneX？
function isIphoneX(){
return /iphone/gi.test(navigator.userAgent) && (screen.height == 812 && screen.width == 375)
}
html5
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。